import React, { useState } from "react";
import { NavBar, Space, Toast } from "antd-mobile";
import { useNavigate } from "react-router-dom";
// import { Form, Input, Button } from "antd-mobile";
import { Form, Input, Button } from "antd-mobile";
import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons";
import styles from "./css/index.module.css";
import { loginApi } from "../../api/login";

function Index() {
  const [jing, setjing] = useState(false);
  const tiao = useNavigate();
  const onFinish = async (values) => {
    console.log(values);
    const { data: res } = await loginApi(values);
    console.log(res);
    setjing(true);
    if (res) {
      localStorage.setItem("token", res.token);
      setjing(false);
      tiao("/home");
    }
  };
  const [visible, setVisible] = useState(false);
  return (
    <div>
      <NavBar onBack={() => tiao(-1)}></NavBar>
      <div className={styles.hezi}>登录页面</div>
      <Form
        onFinish={onFinish}
        layout="horizontal"
        footer={
          <Button
            block
            type="submit"
            color="primary"
            size="large"
            disabled={jing}
          >
            提交
          </Button>
        }
      >
        <Form.Item
          name="username"
          rules={[{ required: true, message: "用户名不能为空" }]}
        >
          <Input placeholder="用户名" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: "密码不能为空" }]}
        >
          <div className={styles.password}>
            <Input
              className={styles.input}
              placeholder="请输入密码"
              type={visible ? "text" : "password"}
            />
            <div className={styles.eye}>
              {!visible ? (
                <EyeInvisibleOutline onClick={() => setVisible(true)} />
              ) : (
                <EyeOutline onClick={() => setVisible(false)} />
              )}
            </div>
          </div>
        </Form.Item>
      </Form>
    </div>
  );
}

export default Index;
